<template>
  <dv-charts :option="option" :height="300" />
</template>

<script>
import { changeDefaultConfig } from '@jiaminghi/charts'
import { volunteerPopulation } from '@/network/request'

export default {
  name: 'LineChart',
  props: {
    // 数据
    chartsLineData: {
      type: Object,
      required: true
    },
    // 是否平滑曲线
    isSmooth: {
      type: Boolean,
      required: false,
      default: true
    },
    // 是否显示数值标签
    labelIsShow: {
      type: Boolean,
      required: false,
      default: true
    },
    // 是否显示图例
    legendIsShow: {
      type: Boolean,
      required: false,
      default: true
    },
    // 是否堆叠显示
    isStack: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      option: {}
    }
  },
  methods: {
    createChart () {
      console.error('sadasdf')
      console.log(this.chartsLineData)
      // 修改默认配置
      changeDefaultConfig('xAxis', this.$utils.chartsDefaultOptions.xAxisParam)
      changeDefaultConfig('yAxis', this.$utils.chartsDefaultOptions.yAxisParam)
      // 循环数据，取出图例legend下的data数据
      const _legendData = []
      this.chartsLineData.legend.forEach((item) => {
        _legendData.push({
          name: item
        })
      })
      // console.log(_legendData)
      // 循环数据，取出series下的data数据
      const _series = []
      this.chartsLineData.series.forEach((item, index) => {
        // 根据参数判断stack类型
        if (this.isStack) {
          _series.push({
            name: this.chartsLineData.legend[index],
            data: item,
            type: 'line',
            smooth: true,
            lineStyle: {
              lineWidth: 2
            },
            label: {
              show: this.labelIsShow
            }
          })
        } else {
          _series.push({
            name: this.chartsLineData.legend[index],
            data: item,
            type: 'line',
            smooth: true,
            lineStyle: {
              lineWidth: 2
            },
            label: {
              show: true
            }
          })
        }
      })
      this.option = {
        legend: {
          top: '10%',
          show: true,
          textStyle: {
            fill: '#ccc'
          },
          data: _legendData
        },
        xAxis: {
          data: this.chartsLineData.xAxis
        },
        yAxis: {
          data: 'value'
        },
        series: _series

      }
    }
  },
  watch: {
    chartsLineData: {
      handler (newValue, oldValue) {
        if (oldValue != newValue) {
          this.createChart()
        }
      },
      deep: true
    }
  }
}
</script>
<style>
</style>
